<template>
  <div class="outside">
    <div class="logdiv">
      <div class="imgdiv"></div>
      <div class="fromDiv">
        <a-form :model="formState" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" autocomplete="off"
          @finish="onFinish" @finishFailed="onFinishFailed">
          <a-form-item label="用户名" name="username" :rules="[{ required: true, message: 'Please input your username!' }]">
            <a-input v-model:value="formState.username" placeholder="请注册tom" />
          </a-form-item>

          <a-form-item label="密码" name="password" :rules="[{ required: true, message: 'Please input your password!' }]">
            <a-input-password v-model:value="formState.password" placeholder="123" />
          </a-form-item>

          <a-form-item name="remember" :wrapper-col="{ offset: 8, span: 16 }">
            <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
          </a-form-item>

          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <div class="submitbtn">
              <a-button type="primary" html-type="submit">登录</a-button>
              <a-button type="primary" @click="registered(0)">注册</a-button>
              <a-button type="primary" @click="registered(1)">找回密码</a-button>

            </div>
            <p style="margin-top: 10px;color:red" v-show="isShowLoginError">用户名或密码错误</p>
          </a-form-item>
        </a-form>
      </div>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { loginApi } from "@/api/VipApi"
import { useStore } from 'vuex';

interface FormState {
  username: string;
  password: string;
  remember: boolean;
}
export default defineComponent({
  setup() {
    const router = useRouter()
    const formState = reactive<FormState>({
      username: '',
      password: '',
      remember: true,
    });

    const store = useStore()
    const isShowLoginError = ref(false)
    const onFinish = (values: any) => {
      loginApi(values).then((res) => {
        if (!res.data) {
          isShowLoginError.value = true
        } else {
          localStorage.setItem("token", JSON.stringify(res.data))
          store.commit('changeLoginUser', res.data.username)
          router.push("/layout/jingying")
          router.go(0)
        }
      })
    };

    const onFinishFailed = (errorInfo: any) => {
      console.log('Failed:', errorInfo);
    };

    const registered = (num: number) => {
      if (num) {
        router.push("/findpassword")
      } else {
        router.push("/zhuce")
      }
    }
    return {
      formState,
      onFinish,
      onFinishFailed,
      registered,
      isShowLoginError
    };
  },
});
</script>

<style lang="less" scoped>
.outside {
  background: url(@/assets/beijng.png);
  display: flex;
  justify-content: center;
  align-items: center;

  .logdiv {
    width: 1300px;
    height: 600px;
    border-radius: 20px;
    background-color: white;
    box-shadow: 3px 2px 14px #252525;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .imgdiv {
      width: 53%;
      height: 100%;
      display: inline-block;
      background: white url(@/assets/main-chahua.png) no-repeat left center;
    }

    .fromDiv {
      width: 46%;
      height: 100%;
      float: right;
      display: flex;
      justify-content: center;
      align-items: center;

      .ant-form {
        width: 500px;
      }
    }

  }
}

.submitbtn {
  display: flex;
  justify-content: space-around;
}

.flip-card {
  background-color: transparent;
  width: 240px;
  height: 154px;
  perspective: 1000px;
}

.heading {
  position: absolute;
  letter-spacing: .2em;
  font-size: 0.5em;
  top: 2em;
  left: 18.6em;
}

.logo {
  position: absolute;
  top: 6.8em;
  left: 11.7em;
}

.chip {
  position: absolute;
  top: 2.3em;
  left: 1.5em;
}

.contactless {
  position: absolute;
  top: 3.5em;
  left: 12.4em;
}

.number {
  position: absolute;
  font-weight: bold;
  font-size: .6em;
  top: 8.3em;
  left: 1.6em;
}

.valid_thru {
  position: absolute;
  font-weight: bold;
  top: 635.8em;
  font-size: .01em;
  left: 140.3em;
}

.date {
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  top: 13.6em;
  left: 3.2em;
}

.name {
  position: absolute;
  font-weight: bold;
  font-size: 0.5em;
  top: 16.1em;
  left: 2em;
}

.strip {
  position: absolute;
  background-color: black;
  width: 15em;
  height: 1.5em;
  top: 2.4em;
  background: repeating-linear-gradient(45deg,
      #303030,
      #303030 10px,
      #202020 10px,
      #202020 20px);
}

.mstrip {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 8em;
  height: 0.8em;
  top: 5em;
  left: .8em;
  border-radius: 2.5px;
}

.sstrip {
  position: absolute;
  background-color: rgb(255, 255, 255);
  width: 4.1em;
  height: 0.8em;
  top: 5em;
  left: 10em;
  border-radius: 2.5px;
}

.code {
  font-weight: bold;
  text-align: center;
  margin: .2em;
  color: black;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  box-shadow: 0 8px 14px 0 rgba(0, 0, 0, 0.2);
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 1rem;
}

.flip-card-front {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
}

.flip-card-back {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 2px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -1px 0px inset;
  background-color: #171717;
  transform: rotateY(180deg);
}
</style>